<template>
  <div class="menu">
    <!-- 数据列表 -->
    <div class="data-box">
      <div class="row">
        <div class="left">
          <el-icon><Tickets /></el-icon>
          <span>数据列表</span>
        </div>
        <div class="right">
          <el-button type="primary" @click="router.push('/ums/addMenu')"
            >添加</el-button
          >
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="list"
        border
        table-layout="auto"
        cell-class-name="align-c"
      >
        <el-table-column prop="id" label="编号" width="60" />
        <el-table-column prop="title" label="菜单名称" width="150" />
        <el-table-column prop="level" label="菜单级数" width="150" />
        <el-table-column prop="name" label="前端名称" />
        <el-table-column prop="icon" label="前端图标" width="150">
          <template #default="{ row }">
            <i class="iconfont" :class="row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="150">
          <template #default="{ row }">
            <el-switch
              v-model="row.hidden"
              :active-value="0"
              :inactive-value="1"
              @click="editHidden(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="设置" width="150">
          <template #default="{ row }">
            <el-button
              text
              type="primary"
              v-permission="'editRole'"
              @click="checkLevel(row.id)"
              :disabled="row.level === 1"
              >查看下级</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
              text
              type="primary"
              v-permission="'editRole'"
              @click="editMenuFn(row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <ElConfigProvider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageChangeHandle"
          @current-change="pageSizeChangeHandle"
        />
      </ElConfigProvider>
    </div>
  </div>
</template>
<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { Tickets } from "@element-plus/icons-vue";
import { reactive, watch } from "vue";
import useTable from "@/hooks/useTable";
import { menuListByIdApi, editMenuHiddenApi } from "./api";
import { useRouter } from "vue-router";
const router = useRouter();
const form = reactive({
  parentId: 0,
});

let {
  list,
  total,
  pageNum,
  pageSize,
  pageChangeHandle,
  pageSizeChangeHandle,
  ListFn,
} = useTable(menuListByIdApi, form);

watch(
  () => form.parentId,
  () => {
    if (form.parentId === 0) return;
    ListFn();
  }
);

// 修改菜单显示状态
const editHidden = (row: IMenuModel) => {
  editMenuHiddenApi(row.id as number, row.hidden).then((res) => {
    if (res.code === 200) {
    }
  });
};

const checkLevel = (id: number) => {
  form.parentId = id;
  router.push("/ums/menu?pid=" + id);
};

const editMenuFn = (pid: number) => {
  router.push("/ums/addMenu?pid=" + pid);
};
</script>
<style lang="less" scoped>
.menu {
  .data-box {
    box-shadow: 0px 0px 12px 2px rgb(0 0 0 / 10%);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    .row {
      // padding: 10px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      span {
        padding-left: 10px;
      }
    }
  }
  :deep(.el-table) {
    font-size: 12px;
    .cell {
      text-align: center !important;
    }
  }
  .page {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
